<template>
    <div>
        <div class="mall-order">
            <list-top></list-top>
            <div class="mall-order-orders">
                <div class="w1200">
                    
                    <div class="mall-order-orders-top">
                         <div class="headTitle">
                              <span class="active">全部订单</span>
                            <span>待支付订单</span>
                            <span>待受理订单</span>
                            <span>待发货订单</span>
                            <span>已发货订单</span>
                            <span>待签收订单</span>
                            <span>已结算订单</span>
                         </div>
                    </div>
                    <div class="mall-order-screen">
                        <div class="fl">
                            <span>筛选</span>
                            <span>清空筛选</span>
                        </div>
                    </div>
                    <div class="mall-order-list">
                        <div class="mall-order-list-top clear">
                            <div class="mall-w1 fl">药品</div>
                            <div class="mall-w2 fl">支付总价</div>
                            <div class="mall-w3 fl">获得积分</div>
                            <div class="mall-w4 fl">订单状态</div>
                            <div class="mall-w5 fl">操作</div>
                        </div>
                        <div class="mall-order-lists">
                            <div class="mall-order-lists-details clear" v-for="(item,index) in mallList" :key="index">
                                <div class="mall-order-lists-details-t">
                                    <span>2018-04-10 10:53:15</span>
                                    <span>订单编号：</span>
                                    <span>73788451078</span>
                                </div>
                                <div class="mall-order-lists-details-m">
                                    <div class="mall-w1  clear fl">
                                        <div class="mall-order-lists-details-img fl">
                                            <img src="../images/bak03.jpg" alt="">
                                        </div>
                                        <div class="mall-order-lists-details-txt fl">
                                            <div>药品：<span>3款</span></div>
                                            <div>客户：新贵医药（零售商 | ID:100101010101）</div>
                                            <div>来源： APP商城\PC商城</div>
                                        </div>
                                    </div>
                                    <div class="mall-w2 fl">
                                        ￥100000.00
                                    </div>
                                    <div class="mall-w3 fl">
                                        240000分
                                    </div>
                                    <div class="mall-w4 fl" v-if="item.state=='1'">
                                        待支付
                                    </div>
                                    <div class="mall-w4 fl" v-else-if="item.state=='2'">
                                        待受理
                                    </div>
                                    <div class="mall-w4 fl" v-else-if="item.state=='3'">
                                        待发货
                                    </div>
                                    <div class="mall-w4 fl" v-else-if="item.state=='4'">
                                        已发货
                                    </div>
                                    <div class="mall-w4 fl" v-else-if="item.state=='5'">
                                        已签收
                                    </div>
                                    <div class="mall-w4 fl" v-else>
                                        已结算
                                    </div>
                                    <div class="mall-w5 fl" v-if="item.state=='1'">
                                        <div class="mall-w5-list1">
                                            <div>立即支付</div>
                                            <div>取消订单</div>
                                            <div>订单明细</div>
                                        </div>
                                    </div>
                                    <div class="mall-w5 fl" v-else-if="item.state=='2'">
                                        <div class="mall-w5-list1 mall-w5-list2">
                                            <div>提醒处理</div>
                                            <div>订单明细</div>
                                        </div>
                                    </div>
                                    <div class="mall-w5 fl" v-else-if="item.state=='3'">
                                        <div class="mall-w5-list1 mall-w5-list2">
                                            <div>提醒发货</div>
                                            <div>订单明细</div>
                                        </div>
                                    </div>
                                    <div class="mall-w5 fl" v-else-if="item.state=='4'">
                                        <div class="mall-order-lists-details-txts">
                                            订单明细
                                        </div>
                                    </div>
                                    <div class="mall-w5 fl" v-else-if="item.state=='5'">
                                        <div class="mall-order-lists-details-txts">
                                            订单明细
                                        </div>
                                    </div>
                                    <div class="mall-w5 fl" v-else>
                                        <div class="mall-order-lists-details-txts">
                                            订单明细
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="mall-mains-list-page">
                        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400">
                        </el-pagination>
                    </div>
                </div>
            </div>
            <div class="mall-mains-bottoms">
                <div class="w1200">
                    <div>京公网安备 11000002000088号|京ICP证070359号|互联网药品信息服务资格证编号(京)-经营性-2014-0008|新出发京零 字第大120007号</div>
                    <div>互联网出版许可证编号新出网证(京)字150号|出版物经营许可证|网络文化经营许可证京网文[2014]2148-348号|违法和不良信息举报电话：4006561155</div>
                    <div>Copyright © 2004 - 2018 京东JD.com 版权所有|消费者维权热线：4006067733经营证照</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import listTop from "./public/listTop.vue";
    export default {
        components: {
            listTop,
        },
        data() {
            return {
                search: '', //搜索词
                mallList: [{
                        state: "1"
                    },
                    {
                        state: "2"
                    },
                    {
                        state: "3"
                    },
                    {
                        state: "4"
                    },
                    {
                        state: "5"
                    },
                    {
                        state: "6"
                    }
                ]
            };
        },
        methods: {
            searchs() {
                // 点击搜索
            }
        }
    };
</script>

<style lang="less" scoped>
    @import "css/main.less";
</style>

